<template>
  <div>
    <div id="leftThree"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      let myChart = this.$echarts.init(document.getElementById("leftThree"));
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: function (p) {
            return [p[0] + 10, p[1] - 10];
          },
        },
        legend: {
          top: "90%",
          itemWidth: 10,
          itemHeight: 10,
          data: ["参数0", "参数1", "参数2", "参数3", "参数4"],
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "参数",
            type: "pie",
            center: ["50%", "42%"],
            radius: ["40%", "60%"],
            color: [
              "#065aab",
              "#066eab",
              "#0682ab",
              "#0696ab",
              "#06a0ab",
              "#06b4ab",
              "#06c8ab",
              "#06dcab",
              "#06f0ab",
            ],
            label: { show: false },
            labelLine: { show: false },
            data: [
              { value: 1, name: "参数0" },
              { value: 4, name: "参数1" },
              { value: 2, name: "参数2" },
              { value: 2, name: "参数3" },
              { value: 1, name: "参数4" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
#leftThree {
  height: 240px;
}
</style>